<div class="auth-login-logs-index">
    <!-- 关闭Tab时顶部标题 -->
    <div class="layui-body-header">
        <span class="layui-body-header-title">登录日志</span>
        <span class="layui-breadcrumb pull-right">
            <a href="/home">首页</a>
            <a><cite>登录日志</cite></a>
        </span>
    </div>

    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form toolbar">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label" for="username">账号</label>
                            <div class="layui-input-inline">
                                <input type="text" id="username" class="layui-input"
                                       name="username">
                            </div>
                        </div>

                        <div class="layui-inline">&emsp;
                            <button class="layui-btn layui-btn-sm icon-btn" id="btnSearch" lay-submit
                                    lay-filter="LAY-auth-login-logs-search">
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>
                        </div>
                    </div>
                </div>
                <table class="layui-table" id="auth-login-logs-table" lay-filter="auth-login-logs-table"></table>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var _csrf = $('#_csrf').val();

        // 渲染表格
        table.render({
            elem: '#auth-login-logs-table',
            url: '/admin/auth-login-logs/list',
            method: 'get',
            limit: 20,
            where: {'init_data': 'get-request'}, //用于判断是否为get的请求
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', align: 'center', title: '编号', sort: true},
                {field: 'username', align: 'center', title: '账号'},
                {field: 'loginIp', align: 'center', title: '登录ip'},
                {field: 'loginDevice', align: 'center', title: '登录设备'},
                {field: 'loginBrowser', align: 'center', title: '登录浏览器'},
                {
                    field: 'isSuccess', align: 'center', title: '登录结果', templet: function (d) {
                        if (parseInt(d.isSuccess) === 1) {
                            return '<span class="layui-badge layui-badge-green">登录成功</span>';
                        } else {
                            return '<span class="layui-badge layui-badge-red">登录失败</span>';
                        }
                    }
                },
                {field: 'loginTime', align: 'center', title: '登录时间', sort: true, width: '15%'},
                {field: 'remark', align: 'center', title: '备注'},
            ]]
        });

        //监听搜索
        form.on('submit(LAY-auth-login-logs-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('auth-login-logs-table', {
                where: field
            });
            return false;
        });
    });
</script>